那些容易被忽略的设计细节 @加载

前言

加载用于页面和区块的加载中状态。对用户来说是一种反馈，是用户触发，系统反应的过程。设计师日常需求经常会经常遇到加载，拿新页面来说需要考虑：刷新机制、加载中状态、内容加载顺序、数据加载还是操作加载（是否可以下拉刷新，下拉刷新位置及样式...）还有是原生 or RN（React Native）or H5。 

本文章针对加载多场景，多类型，多状态做了针对性的梳理，从产品架构分析到后期落地的一些加载动画进行讲解和展示。

全篇共 2072字，大概需 5-10 分钟的阅读时间。建议浅色模式浏览

目录：

Part 1 理论篇：加载的逻辑梳理

Part 2 实践篇：基于场景，分析 “加载” 的实际应用

Part 1  理论篇：加载的逻辑梳理

“加载” 很重要！！！

• 对于新用户

首次进入平台没有数据，一定有空页面状态，这时加载和空状态结合就非常重要；

• 对于老用户

也能够提升用户体验度以及更好的深入产品功能和运营玩法。

根据上图，可以得知：连接数据库-请求服务器-返回对应数据 这样的过程会产生加载，这时就需要有加载动效来承接此页面。

梳理了加载逻辑框架如下：建议电脑浏览

主要分两大块：数据加载 及 操作过程加载

1. 数据加载：有缓存/无缓存

a. 有缓存：先展示缓存内容，后加载新内容。

b. 无缓存：无数据情况下加载的形式。

因为有缓存的加载形式属于无缓存中的一部分，所以主要分析无缓存的加载形式。

a) 白屏加载

白屏加载可理解为H5页面的加载，页面中间一般有进度条加载/菊花加载/品牌符号加载，整体页面来看，目前市面上的加载形式有三种：返回按钮+静态标识、返回按钮+活动标题+动态loading、返回按钮+活动标题+骨架屏兜底加载。

总结：（支付宝）加载形式体验度更好，提供了返回按钮，也告知了用户当前页面是做什么，同时有大框架的兜底，最大程度的打消了用户急躁心理。

b) 分步加载

分步加载：针对图文结合的页面，顺序加载，先加载较快的元素（文字），后加载较慢的图片（较大元素），让页面过渡更为流畅。

一般情况下在图片未加载出来之前图片都是灰色的方块，其实这样并没有达到最好的效果，可以在方块上增加品牌符号+扫光效果，第一深入品牌，其次告知用户当前状态.（案例：上图右侧动画）

c) 智能加载

智能加载：指软件可以根据手机的网络环境进行加载。

举一个比较常见的例子：我们如果是wifi的情况下刷微博，视频是自动加载播放的；而如果是手机网络，视频是需要主动触发才可以播放的。

d) 懒加载

懒加载: 一般在feed流或列表页面，当页面有较多内容时，会分批加载。

e) 预加载

预加载：更多被运用在阅读类的平台中。会预先加载页面当中的前3-5条内容的二级页面，防止用户在网络不稳定或者断网的情况下，不能顺利的阅读内容（如上图）。

大部分情况下，只会加载二级页面的文字信息，图片信息一般不会预先加载。

2. 操作过程加载

a) 模态加载：

模态加载：防止用户在加载过程中进行其他操作，导致当前加载出错出现的一个模态提示层。（案例：微信支付中）

不过采用这种加载形式，可能会因为网络原因或者内容过多导致长时间处于加载状态，建议提供一个“取消”的操作。

b) 控件自加载

提到控件自加载，可能更多人的印象中它是属于PC端的加载方式，但其实最早期移动端也是必须要有控件加载状态的，得益于网络的提速，很多设计师会忽略掉控件加载。但如果我们在使用软件的过程中，点击一个按钮，因为网络的问题没有任何跳转和提示，这时你会怎么样呢？是不是觉得卡住了或者出现bug，就有可能导致用户杀后台的行为。

所以设计师应考虑所有控件的加载状态！！！

c) 后台加载

后台加载：用户操作功能后，先改变状态后处理交互的行为。

这样一来，用户不用等待太久的时间，可以继续浏览其他内容，把发布的内容放在后台处理。 像微博/抖音/陌陌等在发布动态的时候都是使用这样的加载形式，体验非常好。

以上就是所有加载方式，小伙伴们可以带入所负责的项目进行思考。

Part 2 实践篇：基于场景，分析 “加载” 的实际应用

结合负责的对缘产品来分析>>>

一稿：以平台的性质出发，联想到了丘比特之箭，采用射箭的动画形式体现相亲寻找爱情的意义。

二稿：因一稿没有考虑平台的品牌IP，不够具有品牌特色。

三稿：目前市面上的加载动画越来越丰富，除了解决加载期间急躁的情绪之外也希望给用户带来一些趣味感。

所以我们也考虑采用手势跟随的形式来设计，也融入平台的相亲性质。

a）下拉 [对对IP] 左右寻觅观察 —— 寓意着寻找爱情。

b）松开之后怀抱爱心左右摇晃 —— 代表找到爱情之后愉快情绪。

END

以上就是本次的分享内容，如果你也在梳理平台的加载逻辑；设计加载动画，那希望这篇文章能对你有所帮助。